<template>
  <div class="shoppingCart">
    <el-card class="shopping_card">
      <div class="title">
        <span>购物袋</span>
        <i class="el-icon-shopping-cart-full"></i>
      </div>
      <el-table
        class="shopping_table"
        :data="cart"
        border
        style="width: 100%"
        @selection-change="selectChange"
      >
        
        <el-table-column prop="cover" label="商品" width="width" align="center">
          <!-- eslint-disable-next-line -->
          <template slot-scope="{ row, $index }">
            <img :src="row.cover" alt="图片加载错误" class="cover" />
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          width="width"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="number"
          label="数量"
          width="width"
          align="center"
        >
        <!-- eslint-disable-next-line -->
          <template slot-scope="{ row, $index }">
            <el-button
              plain
              icon="el-icon-minus"
              @click="subNumber(row)"
              size="mini"
            ></el-button>
            <span class="number">{{ row.number }}</span>
            <el-button
              plain
              icon="el-icon-plus"
              @click="addNumber(row)"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="prop"
          label="小计"
          width="width"
          align="center"
        >
        <!-- eslint-disable-next-line -->
          <template slot-scope="{ row, $index }">
            {{ row.number * row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作" width="width" align="center">
          <!-- eslint-disable-next-line -->
          <template slot-scope="{ row, $index }">
            <el-tooltip effect="light" content="删除商品" placement="right">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteCoffee(row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <span class="tips"
          >共计：{{
            total
          }}元</span
        >
        <el-button class="end" type="success" plain @click="pay">结算</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import _ from "lodash";
import { mapState } from "vuex";
export default {
  name: "ShoppingCart",
  data() {
    return {
      selectNumber: 0,
      selectCoffee: [],
    };
  },
  computed: {
    ...mapState({
      cart: (state) => state.cart,
    }),
    total() {
      let sum = 0;
      console.log(12121212, this.cart);
      _.forEach(this.cart, (val, idx) => {
        sum += val.price * val.number;
      });
      return sum;
    },
  },
  methods: {
    selectChange(selection) {
      this.selectCoffee = selection;
      this.selectNumber = selection.length;
      let total = 0;
      selection.forEach((item) => {
        total += item.number * item.price;
      });
      this.total = total;
    },
    deleteCoffee(Coffee) {
      this.$store.commit("DELETE", Coffee);
    },
    detail(Coffee) {
      this.$router.push("/Coffee");
      this.$store.commit("DETAIL", Coffee);
    },
    addNumber(Coffee) {
      this.$store.commit("ADD", Coffee);
    },
    subNumber(Coffee) {
      if (Coffee.number == 1) {
        this.deleteCoffee(Coffee);
      } else {
        this.$store.commit("SUB", Coffee);
      }
    },
    pay() {
      this.$store.commit("PAY", this.selectCoffee);
      this.$message({
        type: "success",
        message: "结算成功！共支付" + this.total + "元",
      });
    },
  },
};
</script>

<style scoped>
.shoppingCart {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #eee;
} /**购物车背景设置*/

.shopping_card {
  margin: 30px 0px;
  width: 1000px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  padding-left: 10px;
  padding-bottom: 10px;
  text-align: left;
}

.cover {
  width: 100px;
  height: 100px;
}

.number {
  padding: 0px 10px;
}

.bottom {
  margin-top: 20px;
  text-align: right;
}

.tips {
  font-size: 16px;
  padding-right: 20px;
}
.end
{
  color: black;
  background-color: #fff;
  border-color: #eee;
}
</style>
